<template>
	<view class="alllist1">
		<view class="list_1" @click="submit" v-for="(item,index) in 8">
			<view class="list_1i">
				<image src="https://s4.ax1x.com/2022/01/26/7L2fJK.png" />
			</view>

			<view class="list_1_2">
				<view class="list_1_2_1">
					教育前瞻课程课程课程教育前瞻课程课程课程...</view>
				<view class="list_1_2_2">
					<image src="@/static/img/jfg.png" mode=""></image>
					<text>100</text>
				</view>
			</view>
			<view class="list_1_3">
				<image src="https://s4.ax1x.com/2022/01/26/7LRxtx.png" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '推荐',

					}, {
						name: '书籍',

					}, {
						name: '课程资料',
						width: '200rpx'

					},

				],
				current: 0
			};
		},
		methods: {
			submit() {
				uni.navigateTo({
					url: '/pages/index/shopping/jifenxiangqing'
				})
			},
		}
	}
</script>

<style lang="scss">
	.alllist1 {
		.list_1 {
			padding: 20rpx;
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			height: 186rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.list_1i {
				image {
					width: 126rpx;
					height: 126rpx
				}
			}

			.list_1_3 {
				margin-top: 65rpx;

				image {
					width: 140rpx;
					height: 58rpx
				}
			}

			.list_1_2 {
				position: relative;
				height: 80%;
				width: 54%;
				text-align: center;

				.list_1_2_2 {
					position: absolute;
					bottom: 0;
					display: flex;
					align-items: center;

					image {
						margin-left: 5rpx;
						margin-right: 5rpx;
						width: 40rpx;
						height: 40rpx
					}

					text {
						font-size: 24rpx;
						font-family: HarmonyOS Sans;
						font-weight: 500;
						color: #F1A637;
						opacity: 1;
					}
				}

				.list_1_2_1 {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					color: #131314;
					opacity: 1;
				}
			}
		}
	}
</style>
